<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,getCurrentInstance} from "vue"
import UploadFile from '@/components/UploadFile/index.vue';
import getRules from "@/validUtils";
// dialog弹框组件

// const dialogVisible = ref(false)
const formDialog = ref(null)

const handleClose = () => {
    cancel()
}
const form = ref({
  remark:'', //备注
  contractObj:{
    fileUrl:'', //合同管理
    fileName:'', //合同名称
  },
  date: [],
})

const props = defineProps({
    dialogVisible:{
        type:Boolean,
        default:false
    },
    backForm:{
        type:Object,
        default:() => ({})
    },
    dialogTitle:{
        type:String,
        default:''
    }
})

// 定义方法
const emit = defineEmits(['changeDialog','submitDialog'])
const backFile = (val) => {
    console.log(val,'val');
    form.value.contractObj = val
    // form.value.contractObj.contract = val.fileUrl
    // form.value.contractObj.contractName = val.fileName
}

const cancel = () => {
    emit('changeDialog',false)
}


// 提交事件
const SubmitEvent = () => {
    formDialog.value.validate((valid) => {
        if (valid) {
            let data = {
                ...props.backForm,
                ...form.value
            }
            emit('submitDialog',data)
        }
    })
}
   



// 回显函数
const echoFu = () => {
    
    if(props.backForm?.startTime){
        form.value.date[0] = props.backForm.startTime || ""
        form.value.date[1] = props.backForm.endTime || ""
        form.value.contractObj.fileUrl = props.backForm.fileObj.fileUrl || ''
        form.value.contractObj.fileName = props.backForm.fileObj.fileName || ''
        form.value.remark = props.backForm.remark || ''
    }
   
}
echoFu()

//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{ 
})

//组件挂载完成后执行的函数
onMounted(()=>{
})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog
            v-model="props.dialogVisible"
            :title="dialogTitle"
            width="500px"
            :before-close="handleClose"
            align-center
            :close-on-click-modal=false
        >
           <div class="dialog-main">
              <div class="title-show">
                <div class="door-info">门店：{{backForm.storeName}}</div>
                <div class="buss-pic">营业执照名称：{{backForm.licenseName}}</div>
              </div>
              <el-form :model="form" label-width="82px" ref="formDialog">
   
   
                <el-form-item label="合同时间" prop="date" :rules="getRules('select', '合同日期')">  
                    <div>
                        <el-date-picker
                            v-model="form.date"
                            type="daterange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD HH:mm"
                            value-format="YYYY-MM-DD HH:mm"
                            style="width:374px; box-sizing:border-box;"
                        />
                    </div>
      
                </el-form-item>
                <el-form-item label="备注">
                <el-input v-model="form.remark"  maxlength="100" show-word-limit/>
                </el-form-item>
                <el-form-item label="上传合同">
                    <UploadFile 
                     @backValue="backFile" 
                     :fileUrlInfo="form.contractObj"
                     > 
                            <template #tips>
                                <div>
                                    <div style="font-size:12px;color:#666;">支持pdf格式，不超过20M</div>
                                </div>
                            </template>
                            </UploadFile>
                </el-form-item>
            </el-form>
            </div>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="SubmitEvent">
                    确定
                    </el-button>
                </span>
                </template>
            </el-dialog>
  </div>
</template>

<style lang="less" scoped>
    .dialog-main{
        .title-show {
            margin:6px 0 16px 0;
            padding: 12px;
            width: 468px;
            height: 66px; 
            background: rgba(52, 128, 255, 8%);
            // opacity: 8%;
            box-sizing: border-box;
            .buss-pic{
              
            }
            .door-info{
                margin-bottom: 12px;
                color: #3480ff;
                font-family: "PingFang SC";
                font-size: 16px;
                font-style: normal;
                font-weight: 600;
                line-height: 16px;
            }
        }
        .el-form-item{
            margin-bottom: 16px;
            :deep(.el-input) {
                width: 374px;
            }
          
         }
    }
   
</style>
